<template>
   <div class="resourceContent">
    <div class="resourceContent-top">
      <span>
        <i class="el-icon-s-data resource"></i>
      </span>
      <span>{{ titlename }}</span>
    </div>
    <div class="resourceContent-con" v-if="['防护目标','风险隐患','应急资源','防汛防风'].includes(titlename)">
      <!-- tab栏弹框 -->
      <div class="resourceContent-contop"  v-if="['防护目标','风险隐患','应急资源'].includes(titlename)">
        <div
          class="resourceContent-contopinner"
          v-for="(item, index) in sourceData"
          :key="index"
          :class="{
            'resourceContent-contopinner': true,
            isActive: rowIndex == index,
          }"
          @click="viewInfo(item, index)"
        >
          <div class="resourceContent-contopinner1">
            <div class="resourceContent-contoptitle">
              <span> </span>
              <span>{{ item.count }}</span>
            </div>
            <div class="resourceContent-contoptitlefont">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
      <!-- poi列表 -->
      <div class="resourceContent-conbot">
        <div
          class="resourceContent-conbotchild"
          v-for="(item, index) in childrenDataAll"
          :key="index"
          :class="{
            'resourceContent-conbotchild': true,
            isActive: childActiveList.indexOf(item.kbId) != -1,
          }"
          @click="viewInfoChildren(item, index)"
        >
          <div>
            <img
              :src="'/data/images/icon/' + item.label + '.png'"
              alt=""
              style="width: 20px; height: 16px"
            />
          </div>
          <div>
            {{ item.count }}
          </div>
          <div>
            {{ item.label }}
          </div>
        </div>
      </div>
      <!--分页数据-->
      <div class="resourceContent-coninfo" v-show="showbot" id="resourceContent-coninfo">
        <div class="resourceContent-coninfotop">
          <div
            class="resourceContent-inner"
            v-for="(item, index) in childrenInfoData"
            :key="index"
            :class="{
              'resourceContent-inner': true,
              isActive: tableIndex == index,
            }"
          >
            <div class="title">
              <span>{{ item.name }}</span>
              <span v-if="item.sfkx == null || item.sfkx == '是'"   @click="viewInfoPoi(item, index)">
                <i class="el-icon-location-information"></i>
              </span>
            </div>
            <div class="address">地址：{{ item.address }}</div>
          </div>
        </div>
        <div class="resourceContent-coninfobot" v-if="childrenInfoData.length>0">
          <el-pagination
            @current-change="handleCurrentChange"
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            background
            layout="prev, pager, next"
            :total="totals"
          >
            >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 图标弹框 -->
    <div class="treeinfo" id="treeinfo" v-if="['防护目标','风险隐患','应急资源','防汛防风'].includes(titlename)">
      <div class="treeinfo-top">
        <span class="treeinfo-title">{{ infoTitle }}</span>
        <i class="el-icon-close close" @click="closeInfo"></i>
      </div>
      <div class="treeinfo-con">
        <div class="treeinfo-contitle">基本信息</div>
        <div class="treeinfo-content">
          <div
            class="treeinfo-inner"
            v-for="(key, index) of Object.keys(inconInfo)"
            :key="index"
          >
            <span>{{ key + "：" }}</span>
            <span>{{ inconInfo[key] }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="resourceContent-tree" v-if="titlename === '政务基底'">
       <tree :msg="dangerSourceArr"  @treedata="inittreeData"></tree>
    </div>
   </div>
</template>

<script>
import axios from "axios";
import { get } from "../../../util/request";
import tree from "../../common/tree.vue"
import qs from 'qs'
import doc from "../../hngk/naturalData";
import fxff from './fxff'
export default {
    data(){
        return{
            targetEmergeData:null,
            showbot: false,
            rowIndex: -1,
            rowIndexchild: -1,
            childrenInfoData: [],
            currentPage: 1,
            pageSize: 4,
            totals: 0,
            currentData: {},
            model: [],
            dangerSourceArr:[],
            tableIndex: -1,
            inconInfo: {},
            infoTitle: "",
            currentName:"",
            targetEmergeData: null,
            childrenDataAllpoi:[],
            childrenData:[],
            childrenDataAll:[],
            currentList:[],
            currentStatus:0,
            sourceData:[],
            oldmodel:null,
            productionDataId:[],
            riskhiddenId:[],
            floodWindeId:[],
            emergeSourceId:[]
        }
    },
    props:["titlename", "childActiveList","statusActive1","statusActive2","statusActive3","statusActive5"],
    components:{
         tree
    },
    watch:{
      statusActiveData:{
          handler(val) {
            if(val.titlename =="防护目标"){
                this.tableIndex = -1
              if(val.statusActive1 == 1){
                 this.initProtectiontarget(this.targetEmergeData)
              }else if(val.statusActive1 == 0){
                 this.removeEntityStatusdanger(this.productionDataId)
                 this.delProtectiontarget(this.targetEmergeData)
              }
            }else if(val.titlename =="风险隐患"){
               this.tableIndex = -1
               if(val.statusActive2 == 1){
                 this.initRiskhiddendanger(this.targetEmergeData)
              }else if(val.statusActive2 == 0){
                this.removeEntityStatusdanger(this.riskhiddenId)
                this.delRiskhiddendanger(this.targetEmergeData)
              }
            }else if(val.titlename =="应急资源"){
               this.tableIndex = -1
              if(val.statusActive3 == 1){
                 this.initemergencyResources(this.targetEmergeData)
              }else if(val.statusActive3 == 0){
                this.removeEntityStatusdanger(this.emergeSourceId)
                this.delemergencyResources(this.targetEmergeData)
              }
            }else if(val.titlename =="防汛防风"){
               this.tableIndex = -1
               if(val.statusActive5 == 1){
                this.initFloodWind(this.targetEmergeData)
               }else if(val.statusActive5 == 0){
                //  console.log(this.floodWindeId)
                this.removeEntityStatusdanger(this.floodWindeId)
                this.deleFloodWind(this.targetEmergeData)
              }
            }
          },
           deep: true,
      },
      watchCollect:{
          handler(val) {
            if(val.titlename == "政务基底"){
              this.initInformation()
            }
            if(val.childActiveList.length >0){
            this.currentName = val.titlename
             this.currentList = val.childActiveList
            if(val.titlename == "防护目标" && this.currentList){
              this.getProtectTargetPage(this.currentList)
             }else if(val.titlename == "风险隐患" && this.currentList){
               this.riskhiddenDanger(this.currentList)
             }else if(val.titlename == "应急资源" && this.currentList){
               this.EmergencyResourcesPage(this.currentList)
             }else if(val.titlename == "防汛防风" && this.currentList){
               this.floodWindPage(this.currentList)
             }
            }else{
              this.showbot = false
            }
          },
          deep: true,
      }
    },
    computed: {
      watchCollect() {
        return {
          titlename: this.titlename,
          childActiveList: this.childActiveList,
        };
     },
      statusActiveData(){
       return {
         titlename:this.titlename,
         statusActive1:this.statusActive1,
         statusActive2:this.statusActive2,
         statusActive3:this.statusActive3,
         statusActive5:this.statusActive5
       }
     },
    },
    mounted(){
       this.$mybus.on("resourceEmitData", (info) => {
       this.targetEmergeData = info;
      });
      this.iconClick()
    },
    methods:{
      // 加载防汛防风数据
      async initFloodWind(val){
         this.rowIndex = -1;
         this.childrenData = [];
         this.childrenDataAll = [];
         this.initchildActiveListArr()
        await get(`${window.loginUrl}/api/v2/range/getTarget?ids=${146}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if(res.code == 200){
            for(let obj in res.data){
            if( obj >=0 && obj<=8){
              this.childrenDataAll.push(res.data[obj])
            }
            }
            for(var i =0;i<this.childrenDataAll.length;i++){
              this.floodWindeId.push(this.childrenDataAll[i].kbId)
              if(this.childrenDataAll[i].count>0){
                  this.viewInfoChildren(this.childrenDataAll[i],i)
              }
            }
          }
        })
      },
      //加载风险隐患数据
      async initRiskhiddendanger(val){
           this.rowIndex = -1;
            this.childrenData = [];
            this.childrenDataAll = [];
            this.initchildActiveListArr()
         await get(
             `${window.loginUrl}/api/v2/range/getTarget?ids=${10}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if (res.code == 200) {
                  this.sourceData = res.data;
            for(var i =0;i<this.sourceData.length;i++){
          for(var j =0;j<this.sourceData[i].children.length;j++){
             for(var z =0;z<this.sourceData[i].children[j].children.length;z++){
               this.childrenDataAll.push(this.sourceData[i].children[j].children[z]);
             }
          }
        }
        for(let x =0;x<this.childrenDataAll.length;x++){
           this.riskhiddenId.push(this.childrenDataAll[x].kbId)
          //  console.log(this.childrenDataAll[x].kbId)
              if(this.childrenDataAll[x].count>0){
                  this.viewInfoChildren(this.childrenDataAll[x],x)
              }
          }
          }
         })
      },
        // 加载防护目标数据
      async initProtectiontarget(val){
            this.rowIndex = -1;
            this.childrenData = [];
            this.childrenDataAll = [];
            this.initchildActiveListArr()
        await get(
             `${window.loginUrl}/api/v2/range/getTarget?ids=${43}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if (res.code == 200) {
            this.sourceData = res.data;
            for(var i =0;i<this.sourceData.length;i++){
          for(var j =0;j<this.sourceData[i].children.length;j++){
             for(var z =0;z<this.sourceData[i].children[j].children.length;z++){
               this.childrenDataAll.push(this.sourceData[i].children[j].children[z]);
             }
          }
        }
        for(let x =0;x<this.childrenDataAll.length;x++){
             this.productionDataId.push(this.childrenDataAll[x].kbId)
              if(this.childrenDataAll[x].count>0){
                  this.viewInfoChildren(this.childrenDataAll[x],x)
              }
        }
          }
         })
      }, 
         // 加载应急资源数据
      async initemergencyResources(val){
        console.log(val)
           this.rowIndex = -1;
            this.childrenData = [];
            this.childrenDataAll = [];
          this.initchildActiveListArr()
        await get(
             `${window.loginUrl}/api/v2/range/getTarget?ids=${78}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if (res.code == 200) {
            this.sourceData = res.data;
            for(var i =0;i<this.sourceData.length;i++){
          for(var j =0;j<this.sourceData[i].children.length;j++){
             for(var z =0;z<this.sourceData[i].children[j].children.length;z++){
               this.childrenDataAll.push(this.sourceData[i].children[j].children[z]);
             }
          }
        }
        for(let x =0;x<this.childrenDataAll.length;x++){
          //  this.productionDataId.push(this.childrenDataAll[x].kbId)
          this.emergeSourceId.push(this.childrenDataAll[x].kbId)
              if(this.childrenDataAll[x].count>0){
                  this.viewInfoChildren(this.childrenDataAll[x],x)
              }
        }
          }
         })
      },
      // 删除防护目标数据
      async delProtectiontarget(val){
            this.rowIndex = -1;
            this.childrenData = [];
            this.childrenDataAll = [];
        await get(
             `${window.loginUrl}/api/v2/range/getTarget?ids=${43}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if (res.code == 200) {
            this.sourceData = res.data;
            for(var i =0;i<this.sourceData.length;i++){
          for(var j =0;j<this.sourceData[i].children.length;j++){
             for(var z =0;z<this.sourceData[i].children[j].children.length;z++){
               this.childrenDataAll.push(this.sourceData[i].children[j].children[z]);
             }
          }
          }
          }
         })
      }, 
      // 删除风险隐患数据
      delRiskhiddendanger(val){
          this.rowIndex = -1;
            this.childrenData = [];
            this.childrenDataAll = [];
       get(
             `${window.loginUrl}/api/v2/range/getTarget?ids=${10}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if (res.code == 200) {
            this.sourceData = res.data;
            for(var i =0;i<this.sourceData.length;i++){
          for(var j =0;j<this.sourceData[i].children.length;j++){
             for(var z =0;z<this.sourceData[i].children[j].children.length;z++){
               this.childrenDataAll.push(this.sourceData[i].children[j].children[z]);
             }
          }
        }
          }
         })
      },
      //删除应急资源数据
      delemergencyResources(val){
          this.rowIndex = -1;
            this.childrenData = [];
            this.childrenDataAll = [];
       get(
             `${window.loginUrl}/api/v2/range/getTarget?ids=${78}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if (res.code == 200) {
            this.sourceData = res.data;
            for(var i =0;i<this.sourceData.length;i++){
          for(var j =0;j<this.sourceData[i].children.length;j++){
             for(var z =0;z<this.sourceData[i].children[j].children.length;z++){
               this.childrenDataAll.push(this.sourceData[i].children[j].children[z]);
             }
          }
        }
          }
         })
      },
      // 加载默认防汛防风数据
      // 删除防汛防风数据
      deleFloodWind(val){
           this.rowIndex = -1;
         this.childrenData = [];
         this.childrenDataAll = [];
         this.initchildActiveListArr()
        get(`${window.loginUrl}/api/v2/range/getTarget?ids=${146}&lng=${val.lng}&lat=${val.lat}&radius=${parseFloat(val.radius).toFixed(1)}`).then(res=>{
          if(res.code == 200){
            for(let obj in res.data){
            if( obj >=0 && obj<=8){
              this.childrenDataAll.push(res.data[obj])
            }
            }
          }
        })
      },
      handleCurrentChange(){
        if(this.currentName =="防护目标"){
           this.tableIndex = -1
           this.getProtectTargetPage(this.currentList)
        }else if(this.currentName =="风险隐患"){
            this.tableIndex = -1
          this.riskhiddenDanger(this.currentList)
        }else if(this.currentName =="应急资源"){
            this.tableIndex = -1
          this.EmergencyResourcesPage(this.currentList)
        }else if(this.currentName =="防汛防风"){
            this.tableIndex = -1
          this.floodWindPage(this.currentList)
        }
      },
      async riskhiddenDanger(arr){
        let baseurl = window.loginUrl;
          await axios({
			    url: `${baseurl}/api/v2/range/getRiskAndPitfallsPage`,
			    method: 'get',
          params:{
            ids:arr,
            current:this.currentPage,
            size:this.pageSize,
            lng:this.targetEmergeData.lng,
            lat:this.targetEmergeData.lat,
            radius:this.targetEmergeData.radius
          },
          paramsSerializer:params=>{
            console.log(qs.stringify(params,{indices:false}))
            return qs.stringify(params,{indices:false})
          }
			     }).then((res) => {
             if(res.data.code == 200){
               this.showbot = true
               this.totals = res.data.data.total
               this.childrenInfoData = res.data.data.records;
          //      this.childrenInfoData.map(
          //   (ele) => (ele.kbId = this.currentData.kbId)
          //  );
               console.log(res.data.data)
             }
		    })
     },
    //  防汛防风分页数据
     floodWindPage(arr){
       let baseurl = window.loginUrl;
          axios({
			    url: `${baseurl}/api/v2/range/getFloodAndWindPreventionPage`,
			    method: 'get',
          params:{
            ids:arr,
            current:this.currentPage,
            size:this.pageSize,
            lng:this.targetEmergeData.lng,
            lat:this.targetEmergeData.lat,
            radius:this.targetEmergeData.radius
          },
          paramsSerializer:params=>{
            return qs.stringify(params,{indices:false})
          }
			     }).then((res) => {
             if(res.data.code == 200){
               this.showbot = true
               this.totals = res.data.data.total
               this.childrenInfoData = res.data.data.records;
              //  for(var i =0;i<res.data.data.records.length;i++){
              //    if(res.data.data.records[i].sfkx == null || res.data.data.records[i].sfkx == "是"){
              //      this.childrenInfoData.push(res.data.data.records[i])
              //    }
              //  }
               console.log(this.childrenInfoData)
          //      this.childrenInfoData.map(
          //   (ele) => (ele.kbId = this.currentData.kbId)
          //  );
               console.log(res.data.data)
             }
		    })
     },
      async getProtectTargetPage(arr){
         let baseurl = window.loginUrl;
          await axios({
			    url: `${baseurl}/api/v2/range/getProtectTargetPage`,
			    method: 'get',
          params:{
            ids:arr,
            current:this.currentPage,
            size:this.pageSize,
            lng:this.targetEmergeData.lng,
            lat:this.targetEmergeData.lat,
            radius:this.targetEmergeData.radius
          },
          paramsSerializer:params=>{
            return qs.stringify(params,{indices:false})
          }
			     }).then((res) => {
             if(res.data.code == 200){
               this.showbot = true
               this.totals = res.data.data.total
               this.childrenInfoData = res.data.data.records;
            //    this.childrenInfoData.map(
            // (ele) => (ele.kbId = this.currentData.kbId)
            // );
             }
		    })
    },
    async EmergencyResourcesPage(arr){
      let baseurl = window.loginUrl;
          await axios({
			    url: `${baseurl}/api/v2/range/getEmergencyResourcesPage`,
			    method: 'get',
          params:{
            ids:arr,
            current:this.currentPage,
            size:this.pageSize,
            lng:this.targetEmergeData.lng,
            lat:this.targetEmergeData.lat,
            radius:this.targetEmergeData.radius
          },
          paramsSerializer:params=>{
            // console.log(qs.stringify(params,{indices:false}))
            return qs.stringify(params,{indices:false})
          }
			     }).then((res) => {
             if(res.data.code == 200){
               this.showbot = true
               this.totals = res.data.data.total
               this.childrenInfoData = res.data.data.records;
            //    this.childrenInfoData.map(
            //    (ele) => (ele.kbId = this.currentData.kbId)
            //  );
              //  console.log(res.data.data)
             }
		    })
    },
    // 点击二级标题
    viewInfo(item, index) {
      this.childrenData = [];
      this.childrenDataAll = [];
      this.rowIndex = index;
      // this.clearEntity()
      for (var i = 0; i < item.children.length; i++) {
        this.childrenData.push(item.children[i].children);
      }
      for (var i = 0; i < this.childrenData.length; i++) {
        for (var j = 0; j < this.childrenData[i].length; j++) {
          this.childrenDataAll.push(this.childrenData[i][j]);
        }
      }
      let sources=["应急人力资源","应急物资保障资源","应急卫生资源","应急避难场所"]
    //  防护目标
      if(item.label == "重要部位" || item.label == "关键基础设施" || item.label == "重点文物保护单位"){
         this.removeEntityStatusdanger(this.productionDataId)
         for(let x =0;x<this.childrenDataAll.length;x++){
              if(this.childrenDataAll[x].count>0){
                  this.viewInfoChildren(this.childrenDataAll[x],x)
                  // this.viewInfoChildren(this.childrenDataAll[x],x)
              }
        }
      }else if(item.label == "事故灾难危险源" || item.label == "自然灾害风险隐患"){
        this.removeEntityStatusdanger(this.riskhiddenId)
         for(let x =0;x<this.childrenDataAll.length;x++){
              if(this.childrenDataAll[x].count>0){
                  this.viewInfoChildren(this.childrenDataAll[x],x)
              }
        }
      }else if(sources.includes(item.label)){
         this.removeEntityStatusdanger(this.emergeSourceId)
        for(let x =0;x<this.childrenDataAll.length;x++){
              if(this.childrenDataAll[x].count>0){
                  this.viewInfoChildren(this.childrenDataAll[x],x)
              }
        }
      }
    },
    initPoi(item) {
        let sourceArr =["水库","地质灾害隐患点","漫水桥(路)","危房","旅游景区景点","易淹易涝点(区)","渔船","渔港","塔吊"]
        if(sourceArr.includes(item.label)){
          this.dataToviewers(
            item.data,
            `/data/images/icon/${item.label}.png`,
            item.label,
            item.kbId,
            item.kbApiDetail,
            "防汛防风"
          );
        }else{
           this.dataToviewers(
            item.data,
            `/data/images/icon/${item.label}.png`,
            item.label,
            item.kbId,
            item.kbApiDetail,
            "应急资源"
          );
        }
        this.currentList.push(item.kbId)
        const oneDiv = window.document.getElementById("resourceContent-coninfo");
        if(oneDiv){
           oneDiv.style.display = "block";
        }    
    },
    dataToviewers(data, img, type, kbId, kbApiDetail, types) {
      for (var i = 0; i < data.length; i++) {
        // console.log(data[i].id)
        // console.log(kbId)
        if (data[i].sfkx == null || data[i].sfkx == "是") {
          this.entity = viewer.entities.add({
            id: `${data[i].id}_${kbId}`,
            cursor: true,
            data: data[i],
            datakbId: kbId,
            type: types,
            dataType: type,
            dataUrl: kbApiDetail,
            dataPosition: [data[i].lng, data[i].lat],
            position: Cesium.Cartesian3.fromDegrees(
              data[i].lng,
              parseFloat(data[i].lat)
            ),
            billboard: {
              image: img,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //
              width: 20,
              height: 25,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              // scaleByDistance:new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0)
            },
            
          });
          this.model.push(this.entity);
        }
      }
    },
    initchildActiveListArr(){
      this.$emit("childActiveListArr",this.childActiveList)
    },
    viewInfoChildren(item, index) {
      this.rowIndexchild = index;
      this.currentData = item;
      this.$emit("childActive", item);
      this.$emit("childActiveItem",item)
      this.currentPage = 1;
      this.showbot = true;
    },
    removeEntity(id) {
      for (let i = 0; i < this.model.length; i++) {
        if (this.model[i].datakbId === id) {
          viewer.entities.remove(this.model[i]);
        }
      }
      this.model = this.model.filter((ele) => ele.datakbId != id);
    },
    // 删除所有的上球点
    clearEntity(){
       for (let i = this.model.length-1; i >=0; i--) {
          viewer.entities.remove(this.model[i]);
        }
        this.model =[]
    },
    // 风险隐患 
    removeEntityStatusdanger(activeList){
    console.log(activeList)
           //两个数组去重结果
      let newList=[];
      //this.mode dataBid数组
      let modelList=[];
      // console.log(this.model)
      for (let i = 0; i<this.model.length; i++) {
        // console.log(this.model[i])
        modelList.push(this.model[i]._datakbId);
          if(activeList.includes(this.model[i]._datakbId)){
             viewer.entities.remove(this.model[i]);
            //  console.log(this.currentList)
          }
        }
        //两个数组去重操作
           this.currentList.forEach(res=>{
            let index=modelList.indexOf(res)
            if(index==-1){
              newList.push(res)
            }
          })
          this.$emit("editList",newList)
    },
    // 防护目标
    removeEntityTarget(){
      //两个数组去重结果
      let newList=[];
      //this.mode dataBid数组
      let modelList=[];
      for (let i = 0; i<this.model.length; i++) {
        modelList.push(this.model[i]._datakbId);
          // let arr =[48,49,50,51,53,58,59,61,64,65,69,72,74,76,52]
          if(this.productionDataId.includes(this.model[i]._datakbId)){
             viewer.entities.remove(this.model[i]);
            //  console.log(this.currentList)
          }
        }
        // 两个数组去重操作
           this.currentList.forEach(res=>{
            let index=modelList.indexOf(res)
            if(index==-1){
              newList.push(res)
            }
          })
          this.$emit("editList",newList)
    },
    // 应急资源
    removeEntityemergencyResources(){
         //两个数组去重结果
      let newList=[];
      //this.mode dataBid数组
      let modelList=[];
      for (let i = 0; i<this.model.length; i++) {
        modelList.push(this.model[i]._datakbId);
          // let arr =[81,82,83,98,99,100,101,102,105,106,107,108,109]
          if(this.emergeSourceId.includes(this.model[i]._datakbId)){
             viewer.entities.remove(this.model[i]);
          }
        }
        //两个数组去重操作
           this.currentList.forEach(res=>{
            let index=modelList.indexOf(res)
            if(index==-1){
              newList.push(res)
            }
          })
          this.$emit("editList",newList)
    },
    inittreeData(data,checked){
			if(checked){
             let that = this
            //  console.log(data)
            get(`${window.loginUrl}/api/tree/getCeHuiTreeById?id=${data.chId}`).then((res=>{
            //   console.log(res)
			    that.addLayerImage(res.chWmts,res.url,res.label)
            // if(res.code == 200){
            //       this.addLayerImage(data.chWmts,data.url,data.label)
            //     }
            }))
            }else {
              this.removeLayerByName(data.label)
            }
		},
    addLayerImage(wmtsUrl,layername,label) {
	// console.log(placeNameService)
     this.layers = viewer.imageryLayers.addImageryProvider(
        // url+?service=WMTS&request=GetCapabilities 配置项
        new Cesium.UrlTemplateImageryProvider({
            //`${url}?layer=${layer}&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format={format}&TileMatrix={TileMatrix}&TileRow={y}&TileCol={x}`
            url: `${wmtsUrl}?layer=RIVER_L&style=460203&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format={format}&TileMatrix={TileMatrix}&TileRow={y}&TileCol={x}`,
            layer: layername,
            style: "default",
            format: "image/png",
            tileMatrixSetID: "default028mm",
            tilingScheme: new Cesium.GeographicTilingScheme(),
            //动态计算level
            customTags: {
                TileMatrix: function (imageryProvider, x, y, level) {
                    return level + 1;
                },
                // TileRow:function(y){
                //    return y+3000;
                // }
            },
        }));
        this.layers.name = label
         return  this.layers
    },
    removeLayerByName(name) {
     for(var i =0;i<viewer.imageryLayers._layers.length;i++){
        if(name == viewer.imageryLayers._layers[i].name){
            viewer.imageryLayers.remove(viewer.imageryLayers._layers[i])
        }
        }
    },
    initInformation(){
      // console.log(234)
			let baseurl = window.loginUrl;
			let that = this
            axios({
			     	url: `${baseurl}/api/tree/getCeHuiTree`,
			     	method: 'get',
                    params:{
                       ids:"1"
                    }
			     }).then((res) => {
             if(res.status == 200){
					that.dangerSourceArr = res.data
					console.log(that.dangerSourceArr)
            }
		    })
      // this.dangerSourceArr =  this.cehuiData
		},
    iconClick() {
      var handlerVideo = new Cesium.ScreenSpaceEventHandler(
        viewer.scene.canvas
      );
      let that = this;
      handlerVideo.setInputAction((movement) => {
        if(viewer._selectedEntity && viewer._selectedEntity._type =="应急资源"){
            this.clickDealEvent(
            viewer._selectedEntity._dataUrl,
            viewer._selectedEntity._datakbId,
            viewer._selectedEntity._data.id,
            viewer._selectedEntity._dataType,
            viewer._selectedEntity._position._value,
            viewer._selectedEntity._type
          );
        }else if(viewer._selectedEntity && viewer._selectedEntity._type =="防汛防风"){
            this.clickDealEvent(
            viewer._selectedEntity._dataUrl,
            viewer._selectedEntity._datakbId,
            viewer._selectedEntity._data.id,
            viewer._selectedEntity._dataType,
            viewer._selectedEntity._position._value,
             viewer._selectedEntity._type
          );
        }
        // let pickedObject = viewer.scene.pick(movement.position);
        // if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && pickedObject.id._type === "应急资源") {
        //   console.log(pickedObject)
        //   if(that.oldmodel !== null){
        //     console.log(that.oldmodel)

        //   }


        //   that.oldmodel = pickedObject.id
        //   this.clickDealEvent(
        //     pickedObject.id._dataUrl,
        //     pickedObject.id._datakbId,
        //     pickedObject.id._data.id,
        //     pickedObject.id._dataType,
        //     pickedObject.id._position._value
        //   );
        // }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    // 点击处理事件
    clickDealEvent(dataUrl, datakbId, id, dataType, position,type) {
      if(type == "防汛防风"){
         this.infoTitle = dataType;
         get(`${window.loginUrl}${dataUrl}?id=${id}`).then(
        (res) => {
          if(res.code == 200){
            console.log(res.data.baseInfo)
            let vData = res.data.baseInfo;
            let dic = fxff[dataType];
            this.inconInfo = {};
            for (let key in dic) {
              this.inconInfo[dic[key]] = vData[key];
            }
            this.addBoundInfoBox(position, "treeinfo");
          }
        }
      );
      }else {
         this.infoTitle = dataType;
        get(`${window.loginUrl}${dataUrl}?kbId=${datakbId}&dataId=${id}`).then(
        (res) => {
          console.log(res);
          if (res.code == 200) {
            let vData = res.data;
            let dic = doc[dataType];
            this.inconInfo = {};
            for (let key in dic) {
              this.inconInfo[dic[key]] = vData[key];
            }
            this.addBoundInfoBox(position, "treeinfo");
          }
        }
      );
      }
    },
     addBoundInfoBox(positionValue, elementId) {
      // console.log(1234)
      const oneDiv = window.document.getElementById(elementId);
      oneDiv.style.display = "block";
      let that = this;
      let preRenderListener = viewer.scene.postRender.addEventListener(() => {
        let elWidth = oneDiv.offsetWidth;
        let elHeight = oneDiv.offsetHeight;
        if (that.screenWidth === 1920) {
          elWidth = oneDiv.offsetWidth;
          elHeight = oneDiv.offsetHeight;
        } else if (that.screenWidth === 3840) {
          elWidth = oneDiv.offsetWidth - 1920;
          elHeight = oneDiv.offsetHeight;
        }
        const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
        let position = positionValue;
        var cartographicPosition =
          Cesium.Ellipsoid.WGS84.cartesianToCartographic(position); //笛卡尔转84
        var lat = Cesium.Math.toDegrees(cartographicPosition.latitude);
        var lng = Cesium.Math.toDegrees(cartographicPosition.longitude);
        var alt = cartographicPosition.height;
        var positions = [Cesium.Cartographic.fromDegrees(lng, lat)];
        var carto = new Cesium.Cartographic.fromDegrees(lng, lat); //输入经纬度
        var h2 = viewer.scene.sampleHeight(carto);

        // var promise = Cesium.sampleTerrainMostDetailed(window.dx, positions);//(地形数据，positions)
        var position1 = Cesium.Cartesian3.fromDegrees(lng, lat, h2); //加入高度之后，不会飘，但是不能解决地球缩放问题
        const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
          position1,
          scratch
        ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标

        if (Cesium.defined(canvasPosition)) {
          // 根据元素宽高及当前点屏幕坐标进行偏移
          oneDiv.style.top = canvasPosition.y - elHeight * 1.1 + "px";
          oneDiv.style.left = canvasPosition.x - elWidth / 2 + "px";
        }
      });
    },
    viewInfoPoi(item, index) {
      console.log(item)
      this.tableIndex = index;
         let option = {
        destination: Cesium.Cartesian3.fromDegrees(
          parseFloat(item.lng),
          parseFloat(item.lat),
          // 1000
          2000
        ),
        duration: 1.5,
      };
      //   let that = this;
      viewer.camera.flyTo(option);
      option.complete = () => {
        console.log(item)
        let pickedObject = viewer.entities.getById(`${item.id}_${item.kbId}`);
        console.log(pickedObject)
        this.clickDealEvent(
          pickedObject._dataUrl,
          pickedObject._datakbId,
          pickedObject._data.id,
          pickedObject._dataType,
          pickedObject._position._value,
          pickedObject._type
        );
      };
    },
    closeInfo() {
      var treeinfo = window.document.getElementById("treeinfo");
      if (treeinfo) {
        treeinfo.style.display = "none";
      }
    },
    }

}
</script>
<style scoped lang="stylus">
/deep/ ::-webkit-scrollbar {
  /* 滚动条整体样式 */
  width: 4px;
  /* 高宽分别对应横竖滚动条的尺寸 */
  height: 0;
}

/deep/ ::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #2fd5ff;
  scrollbar-arrow-color: red;
}

/deep/ ::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .resourceContent{
        position: fixed;
        // z-index: 3;
        top: 9.722222222222223vh;
        right: 1.25vw;
        padding-left: 1.25vw;
        width: 19.833333333333336vw;
        height: 89.35185185185185vh;
        box-sizing: border-box;
        background: url('/images/sjzx/leftPanel.png') no-repeat;
        background-size: 100% 100%;
        padding-left: 1.145833333333333vw;
        padding-right: vw(10);
        padding-top: 1.851851851851852vh;
        display: inline-block;
        box-sizing: border-box;
         // background:pink
      //  .resourceContent-tree{
      //    position: absolute;
      //   z-index: 3;
      //   top: 9.722222222222223vh;
      //   right: 1.25vw;
      //  }
        .resourceContent-top {
      width: 100%;
      height: vh(30);
      line-height: vh(30);

      span:nth-child(1) {
        .resource {
          color: #0b99d0;
          font-size: vw(18);
        }
      }

      span:nth-child(2) {
        margin-left: vw(10);
        font-size: vw(18);
      }
    }
     .resourceContent-con {
      width: 100%;
      height: vh(900);
      overflow-y: auto;

      .resourceContent-contop {
        width: 100%;
        overflow: hidden;

        .resourceContent-contopinner {
          width: 46%;
          height: vh(60);
          background: rgba(14, 103, 160, 0.2);
          float: left;
          margin-top: vh(10);
          margin-right: vh(10);
          cursor: pointer;

          .resourceContent-contoptitle {
            width: 100%;
            height: vh(30);
            text-align: center;
            line-height: vh(30);

            span:nth-child(1) {
              margin-right: vw(5);
            }
          }

          .resourceContent-contopinner1 {
            width: 100%;
            margin-bottom: vh(80);

            .resourceContent-contoptitlefont {
              width: 100%;
              height: vh(30);
              text-align: center;
              line-height: vh(30);
              color: #00e5fd;
            }
          }
        }

        .isActive {
          background: rgba(14, 103, 160, 0.6);
          border-left: 2px solid #00e5fd;
          box-sizing: border-box;
        }
      }

      .resourceContent-conbot {
        width: 100%;
        margin-top: vh(20);
        overflow: hidden;

        .resourceContent-conbotchild {
          width: 33.3%;
          height: vh(70);
          float: left;
          text-align: center;
          margin-bottom: vh(10);
          font-size: vw(10);
          cursor: pointer;

          div:nth-child(1) {
          }

          div:nth-child(2) {
            margin-top: vh(5);
            margin-bottom: vh(5);
          }

          div:nth-child(3):hover {
            color: #00e5fd;
          }
        }

        .isActive {
          div:nth-child(2) {
            color: #00e5fd;
          }

          div:nth-child(3) {
            color: #00e5fd;
          }
        }
      }
      .resourceContent-tree{
       position: absolute;
       z-index: 3;
       top:0;
       right:0;
      }
      .resourceContent-coninfo {
        width: 100%;
        height: vh(400);
        margin-bottom: vh(20);

        .resourceContent-coninfotop {
          width: 100%;
          height: vh(360);

          // background:pink;
          .resourceContent-inner {
            width: 100%;
            height: vh(80);
            // background:pink;
            margin-bottom: vh(10);
            background: rgba(14, 103, 160, 0.2);
            padding-left: vw(20);
            padding-right:vw(20);
             box-sizing: border-box;
            .title{
              width: 100%;
              height: vh(40);
              line-height: vh(40);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              span:nth-child(1){
                width:90%;
                height: vh(40);
                float:left;
              }
              span:nth-child(2){
                width:10%;
                height: vh(40);
                float:left;
                // background:pink;
                font-size:20px;
                cursor: pointer;
              }
            }
            .address{
              width: 100%;
              height: vh(40);
              line-height: vh(40);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .isActive {
            background: rgba(14, 103, 160, 0.8);
          }
        }

        .resourceContent-coninfobot {
          width: 100%;
          height: vh(40);
        }
      }
    }
    .treeinfo {
      width: vw(806);
      height: vh(400);
      background: rgba(3, 28, 35, 0.8);
      display: none;
      position: fixed;
      z-index: 999;

      .treeinfo-top {
        width: 100%;
        height: vh(50);
        background: #0b8fab;
        line-height: vh(50);
        padding-left: vw(25);
        box-sizing: border-box;

        .treeinfo-title {
          font-size: 16px;
        }

        .close {
          float: right;
          font-size: 20px;
          height: vh(50);
          line-height: vh(50);
          padding-right: vw(25);
          cursor: pointer;
        }
      }

      .treeinfo-con {
        width: 100%;
        height: vh(300);
        padding: vh(20) vw(20);
        box-sizing: border-box;

        .treeinfo-contitle {
          width: 100%;
          height: vh(30);
          line-height: vh(10);
          color: #00eaff;
          border-bottom: 1px solid #eeeeee;
        }

        .treeinfo-content {
          width: 100%;
          height: vh(280);
          padding-top: vh(20);
          padding-bottom: vh(20);
          box-sizing: border-box;
          overflow-y: auto;

          .treeinfo-inner {
            width: vw(370);
            // height vh(20);
            line-height: vh(27);
            float: left;
            display: flex;
            justify-content: space-around;

            span:nth-child(1) {
              // width:vw(130);
              display: block;
              text-align: right;
              // float :left
              color: #9fabb9;
              font-size: 12px;
              font-weight: 600;
              flex: 1;
            }

            span:nth-child(2) {
              // width:vw(140);
              display: block;
              text-align: left;
              font-size: 12px;
              flex: 1;
              // float :left
            }
          }
        }
      }
    }
    }
    
}
</style>